<template>
  <div class="main">
      <div class="content">
        <el-row :gutter="10">
          <el-col :span="16">
              <div class="product-detail">
                  <h1 class="product-title">
                    {{productDetail.name}}
                  </h1>
                  <div>
                      <div class="product-info">
                        <el-row :gutter="20">
                        <template v-if="productDetail.productCategory == '私募股权'">

                         <el-col :span="8">
                             <div class="border-right">
                              <p><i>{{productDetail.investDirect}}</i></p>
                              <p>投资方向</p>
                            </div>
                          </el-col>

                          <el-col :span="8">
                             <div class="border-right">
                              <p><i>{{productDetail.productDeadlinecp}}</i></p>
                              <p>存续期限</p>
                            </div>
                           </el-col>

                           <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.beginMoney}}</i>万元</p>
                              <p>起投金额</p>
                            </div>
                           </el-col>


                        </template>
                        <template v-else>

                          <el-col :span="8">
                             <div>
                              <p>{{productDetail.payRateWay}}</p>
                              <p>付息方式</p>
                            </div>
                          </el-col>

                          <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.investDirect}}</i></p>
                              <p>投资领域</p>
                            </div>
                           </el-col>

                           <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.beginMoney}}万</i></p>
                              <p>投资起点</p>
                            </div>
                           </el-col>

                        </template>
                        </el-row>
                      <div class="coreHighlights" v-html="productDetail.coreHighlights"></div>
                      <div class="bshare-custom icon-medium fenxiang" style="margin-top:20px;">
                        <div class="bsPromo bsPromo2"></div>
                          <span>分享：</span>
                          <a title="分享到微信" class="bshare-weixin" href="javascript:void(0);"></a>
                          <a title="分享到QQ空间" class="bshare-qzone"></a>
                          <a title="分享到QQ好友" class="bshare-qqim" href="javascript:void(0);"></a>
                          <a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
                          <a title="分享到腾讯微博" class="bshare-qqmb"></a>
                        </div>
                        <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
                        <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
                      </div>
                      <div class="addbanner" v-if="productDetail.productCategory == '契约基金'">
                        <img src="http://img3.tqcaifu.com/addbanner/addbanner1.png" alt="">
                      </div>
                      <div class="addbanner" v-if="productDetail.productCategory == '信托资管'">
                        <img src="http://img3.tqcaifu.com/titleadd/titleguanggao1.jpg" alt="">
                      </div>
                      <div class="addbanner" v-if="productDetail.productCategory == '私募股权'">
                        <img src="http://img3.tqcaifu.com/addbanner/addbanner3.png" alt="">
                      </div>

                      
                      <div class="productdetailinfo">
                        <h2><span></span>产品详情</h2>
                        <div class="productinfotable" v-if="productDetail.productCategory == '私募股权'">
                            <el-row class="productrow">
                              <el-col :span="4" class="key">产品名称：</el-col>
                              <el-col :span="20" class="value">{{productDetail.name}}</el-col>
                            </el-row>
                            <el-row class="productrow">
                              <el-col :span="4" class="key">募集规模：</el-col>
                              <el-col :span="8" class="value">{{productDetail.financeScale == 0 ? "请咨询理财师":productDetail.financeScale}}</el-col>
                              <el-col :span="4" class="key">存续期限：</el-col>
                              <el-col :span="8" class="value">{{productDetail.productDeadlinecp}}</el-col>
                            </el-row>
                            <el-row class="productrow">
                              <el-col :span="4" class="key">投资方向：</el-col>
                              <el-col :span="8" class="value">{{productDetail.investDirect}}</el-col>
                              <el-col :span="4" class="key">产品状态：</el-col>
                              <el-col :span="8" class="value">{{productDetail.productStatus}}</el-col>
                            </el-row>
                            <el-row class="productrow">
                              <el-col :span="4" class="key">投资门槛：</el-col>
                              <el-col :span="8" class="value">{{productDetail.beginMoney}}万元</el-col>
                              <el-col :span="4" class="key">管理费率：</el-col>
                              <el-col :span="8" class="value">{{productDetail.manageRate}}%</el-col>
                            </el-row> 
                             <el-row class="productrow">
                              <el-col :span="4" class="key">发行日期：</el-col>
                              <el-col :span="20" class="value">{{productDetail.beginTime}}</el-col>
                            </el-row>
                        </div>
                        <div class="productinfotable" v-else>
                            <el-row class="productrow">
                              <el-col :span="4" class="key">产品名称：</el-col>
                              <el-col :span="20" class="value">{{productDetail.name}}</el-col>
                            </el-row>
                            <el-row class="productrow"> 
                              <el-col :span="4" class="key">投资领域：</el-col>
                              <el-col :span="8" class="value">{{productDetail.investDirect}}</el-col>
                              <el-col :span="4" class="key">认购起点：</el-col>
                              <el-col :span="8" class="value">{{productDetail.beginMoney}}万元</el-col>
                            </el-row>
                            <el-row class="productrow">
                              <el-col :span="4" class="key">产品状态：</el-col>
                              <el-col :span="8" class="value">{{productDetail.productStatus}}</el-col>
                              <el-col :span="4" class="key">融资规模：</el-col>
                              <el-col :span="8" class="value">{{productDetail.financeScale}}万元</el-col>
                            </el-row>
                            <el-row class="productrow">
                              <el-col :span="4" class="key">产品期限：</el-col>
                              <el-col :span="8" class="value">{{productDetail.productExpires == 0 ? "永续" : productDetail.productExpires }}</el-col>
                              <el-col :span="4" class="key">预期年化收益：</el-col>
                              <el-col :span="8" class="value">{{productDetail.yearEarningsRate}}%</el-col>
                            </el-row>
                              <el-row class="productrow">
                              <el-col :span="4" class="key">付息方式：</el-col>
                              <el-col :span="8" class="value">{{productDetail.payRateWay}}</el-col>
                              <el-col :span="4" class="key">抵押物：</el-col>
                              <el-col :span="8" class="value">{{productDetail.collateral}}</el-col>
                            </el-row>
                             <el-row class="productrow">
                              <el-col :span="4" class="key">发行日期：</el-col>
                              <el-col :span="8" class="value">{{productDetail.beginTime}}</el-col>
                               <el-col :span="4" class="key">发行机构：</el-col>
                              <el-col :span="8" class="value">{{productDetail.publishEduinfo}}</el-col>
                            </el-row>
                        </div>
                     
                      </div>
                        <div class="productdetailinfo" v-if="productDetail.incomeExplain != ''">
                         <h2><span></span>收益说明</h2>
                         <p class="prodetilgood" v-html="productDetail.incomeExplain"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.productExplain != '' && productDetail.productCategory == '私募股权'">
                         <h2><span></span>产品说明</h2>
                         <p class="prodetilgood" v-html="productDetail.productExplain"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.eduInfo != '' && productDetail.productCategory == '私募股权'">
                         <h2><span></span>管理机构介绍</h2>
                         <p class="prodetilgood" v-html="productDetail.eduInfo"></p>
                      </div>
                      <div class="productdetailinfo" v-if=" productDetail.moneyUseFor != '' && productDetail.productCategory != '私募股权'">
                         <h2><span></span>资金用途</h2>
                         <p class="prodetilgood" v-html="productDetail.moneyUseFor"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.payment != '' && productDetail.productCategory != '私募股权'">
                         <h2><span></span>还款来源</h2>
                         <p class="prodetilgood" v-html="productDetail.payment"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.projectLights != '' && productDetail.productCategory != '私募股权'">
                         <h2><span></span>项目亮点</h2>
                         <p class="prodetilgood" v-html="productDetail.projectLights"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.postlist && productDetail.postlist.length != 0">
                         <h2><span></span>产品公告</h2>
                         <nuxt-link target="_blank" v-for="(item,index) in productDetail.postlist" :key="index" class="prodetilgonggao" :to="'/gonggao/' + item.pid"><span>{{item.name}}</span><span>{{item.createtime.slice(0,11)}}</span></nuxt-link>
                      </div>
                  </div>
              </div>
         </el-col>
           <el-col :span="8">
             <div class="right">
                <contactus></contactus>
                 <buyeasy1></buyeasy1>
                 <producttuijian :productlist="productlist"></producttuijian>
             </div>
          </el-col>
        </el-row>
      </div>
    <announcement :infodata="newsinfo" :newbox1="newlist1" :newbox2="newlist2" :newbox3="newlist3"></announcement>

  </div>
</template>


<script>
import api from "../../../static/js/api.js";
import contactus from "../../../components/contactus";
import buyeasy1 from "../../../components/buyeasy1";
import producttuijian from "../../../components/producttuijian";
import announcement from "../../../components/announcement";
import asyncApi from "../../../static/js/asyncApi.js";

export default {
  data() {
    return {
      radio1: "不限",
      radio2: "不限",
      radio3: "不限",
      newsDetail: {},
      tableData1: "",
      tableData2: "",
      newsinfo: {
        title: "投资策略",
        msg1: "观宏观大势，把握市场发展趋势",
        msg2: "观财经实时热点，紧握当下投资机会，",
        msg21: "紧握当下投资机会",
        msg3: "观市场变幻，把握最佳投资时机"
      }
    };
  },

  components: {
    contactus,
    buyeasy1,
    producttuijian,
    announcement
  },
  methods: {

  },
  async asyncData(context) {
    var id = parseInt(context.params.id);
    let [data1, data2, data3] = await Promise.all([
      asyncApi.asyncGetCategoryPost({categoryName: "投资策略",page: "1",pageSize: "15"}),
      asyncApi.asyncgetProductDetail({ id: id }),
      asyncApi.asyncgetProduct({categoryName: "私募股权",page: "1",pageSize: "5"})
    ])
    return {
      newlist1: data1.data.data.list.slice(0, 5),
      newlist2: data1.data.data.list.slice(5, 10),
      newlist3: data1.data.data.list.slice(10, 15),
      productDetail: data2.data.data,
      productlist: data3.data.data.list
    };
  },
  head() {
    return {
      title: this.productDetail.name + "__天沁财富",
      meta: [
        {hid: "keywords",name: "keywords",content: this.productDetail.name + "_天沁财富"},
        {hid: "description",name: "description",content: this.productDetail.name + "_天沁财富"}
      ]
    };
  }
};
</script>

<style scoped>
.addbanner{
  width: 100%;
  margin-top: 10px;
}
.addbanner img{
  width: 100%;
}
.productrow div{
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #e6e6e6;
}
.productrow .key{
  background: #f9f9f9;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.productrow .value{
  padding-left: 20px; 
  font-size: 18px;
  color: #333;  
}
.productinfotable{
  margin: 20px auto;
  border: 1px solid #e6e6e6;
   border-bottom: none ;
}

.border-right{
  border-right: 1px solid #e6e6e6;
}
.fenxiang span {
  font-size: 16px;
  vertical-align: middle;
}
.fenxiang {
  text-align: right;
  padding-right: 30px;
}
.bshareDiv img {
  height: 30px;
  width: 30px;
  vertical-align: middle;
}
.bshareDiv {
  height: 30px;
  line-height: 30px;
}
.prodetilgonggao {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  height: 30px;
  line-height: 30px;
}
.prodetilgonggao span:nth-child(1) {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.productinfo {
  margin: 20px;
}
.productinfo h1 {
  font-size: 16px;
  color: #333;
  font-weight: bolder;
  height: 30px;
  line-height: 30px;
}
.productinfo p {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.productinfo p span {
  display: inline-block;
  width: 33%;
}
.coreHighlights {
  text-align: left;
  font-size: 16px;
  color: #666;
  padding-left: 20px;
  height: 50px;
  line-height: 50px;
  background: #f7f8fc;
}
.prodetilgood {
  margin: 20px;
  font-size: 18px;
  color: #333;
  line-height: 2;
  /*text-indent: 2rem;*/
}
.productdetail {
  background: white;
}
.productdetailinfo {
  padding: 20px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    margin-top: 10px;
    background: white;
}
.product-info {
  background: white;  
  width: 100%;
  box-sizing: border-box;
  border-top: none;
  padding-bottom: 20px;
}

.product-info p {
  text-align: center;
}
.product-info p:nth-child(1) {
  color: #333;
  margin: 30px 0 0;
  font-size: 28px;
}
.product-info p:nth-child(1) i {
  font-size: 22px;
  font-size:36px;
  color: #333;
  
} 
.product-info p:nth-child(2) {
  font-size: 16px;
  padding-top: 20px;
  margin-bottom: 25px;
  color: #333;
}
.producttable ul {
  margin-top: 10px;
  float: left;
  color: #26304c;
  overflow: hidden;
  margin-left: 30px;
}
.producttable li {
  width: 300px;
  border-bottom: 1px dashed #ccc;
  height: 46px;
  line-height: 46px;
  font-size: 14px;
}
.tablekey {
  display: inline-block;
  width: 110px;
  overflow: hidden;
}
.tablevaule {
  display: inline-block;
  width: 180px;
  overflow: hidden;
}
.product-detail h2 {
  font-size: 22px;
  height: 40px;
  width: 150px;
  color: #333;
  line-height: 40px;  
  vertical-align: middle;
  
}
.product-detail h2 span{
  height: 30px;;
  width: 4px;
  display: inline-block;
  background: #cd9c54;
  vertical-align: middle;
  margin-right: 10px;
}
.main .product-title {
  text-align: left;
  height: 40px;
  line-height: 40px;
  background: #fff;
  font-size: 20px;
  border-bottom: 1px solid #e6e6e6;
  padding: 20px 20px 10px;
}
.newcontent {
  text-indent: 2rem;
  overflow: hidden;
  text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  color: #555557;
}

.main {
  width: 1200px;
  margin: 10px auto;
}
.product-detail {
  margin-bottom: 20px;
}
</style>
